<!DOCTYPE html>
<html class="x-admin-sm">
    {include file='public/header'}
    <script src="/admin/xadmin/lib/layui/upload.js" charset="utf-8"></script>
    <style>
        .layui-form-label {
            width: 110px;
        }
        .layui-input-block {
            margin-left: 140px;
        }
    </style>
    <body>
        <div class="x-body">
            <form
                class="layui-form" lay-filter="formAjax">
                <!-- <div class="layui-form-item">
                                    <label class="layui-form-label">
                                        <span class="x-red">*</span>openid
                                    </label>
                                    <div id="pMenu" style="width:100%;flex:1"></div>
                                </div> -->
                <div class="layui-form-item">
                    <label class="layui-form-label">
                        <span class="x-red">*</span>openid:
                    </label>
                    <div class="layui-input-block">
                        <select class="project-select" style="width: 150px;" id="open_id" name="open_id" lay-filter="open_id">
                            <option value="">请选择</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">
                        <span class="x-red">*</span>群名称
                    </label>
                    <div class="layui-input-block">
                        <input type="text" name="group_name" id="group_name" placeholder="请输入群名称" required="required" lay-verify="required" autocomplete="off" class="layui-input" value=""/>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">
                        <span class="x-red">*</span>群头像
                    </label>
                    <button type="button" class="layui-btn" id="img_upload">
                        <i class="layui-icon">&#xe67c;</i>上传图片
                    </button>
                    <img onclick="showimg(this)" class="avatar_uri" name="avatar_uri" style="width: 100px;background-color: #ccc;">
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">
                        <span class="x-red">*</span>群类型
                    </label>
                    <div class="layui-input-block">
                        <input type="radio" name="group_type" value="2" title="粉丝群" checked>
                        <input type="radio" name="group_type" value="5" title="万粉群">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">
                        <span class="x-red">*</span>群简介
                    </label>
                    <div class="layui-input-block">
                        <input type="text" name="description" id="description" placeholder="请输入群简介" required="required" lay-verify="required" autocomplete="off" class="layui-input" value=""/>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">
                        <span class="x-red">*</span>进群审批
                    </label>
                    <div class="layui-input-block">
                        <input type="radio" name="open_audit_switch" value="1" title="开启" checked>
                        <input type="radio" name="open_audit_switch" value="0" title="不开启">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">
                        <span class="x-red">*</span>个人主页
                    </label>
                    <div class="layui-input-block">
                        <input type="radio" name="show_at_profile" value="1" title="展示" checked>
                        <input type="radio" name="show_at_profile" value="0" title="不展示">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">
                        <span class="x-red">*</span>直播同步
                    </label>
                    <div class="layui-input-block">
                        <input type="radio" name="live_auto_sync" value="1" title="同步" checked>
                        <input type="radio" name="live_auto_sync" value="0" title="不同步">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">
                        <span class="x-red">*</span>作品同步
                    </label>
                    <div class="layui-input-block">
                        <input type="radio" name="item_auto_sync" value="1" title="同步" checked>
                        <input type="radio" name="item_auto_sync" value="0" title="不同步">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">
                        <span class="x-red">*</span>加群门槛：粉丝活跃度
                    </label>
                    <div class="layui-input-block">
                        <input type="radio" name="active_fans" value="1" title="活跃粉丝" checked>
                        <input type="radio" name="active_fans" value="0" title="无要求">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">
                        <span class="x-red">*</span>加群门槛：开启群成员邀请进群
                    </label>
                    <div class="layui-input-block">
                        <input type="radio" name="allow_invite" value="1" title="允许" checked>
                        <input type="radio" name="allow_invite" value="0" title="不允许">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">
                        <span class="x-red">*</span>加群门槛：粉丝团等级
                    </label>
                    <div class="layui-input-block">
                        <select name="fans_limit" lay-filter="fans_limit">
                            <option value="">请选择</option>
                            <option value="0">无要求</option>
                            <option value="1">1级及以上</option>
                            <option value="3">3级及以上</option>
                            <option value="5">5级及以上</option>
                            <option value="9">9级及以上</option>
                            <option value="12">12级及以上</option>
                            <option value="15">15级及以上</option>
                            <option value="17">17级及以上</option>
                            <option value="20">20级及以上</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">
                        <span class="x-red">*</span>加群门槛：关注条件
                    </label>
                    <div class="layui-input-block">
                        <select name="relation_type" lay-filter="relation_type">
                            <option value="">请选择</option>
                            <option value="0">无要求</option>
                            <option value="1">仅关注</option>
                            <option value="7">超过7天及以上</option>
                            <option value="30">超过30天及以上</option>
                            <option value="60">超过60天及以上</option>
                        </select>
                    </div>
                </div>
                <input type="hidden" name="id" id="id" value=""/>
                <button id="submitData" class="layui-btn" lay-submit lay-filter="submitData" style="display: none;"/>
            </form>
        </div>
        <script>
            let params = {
                addUrl: '/admin/openDouyin/postGroupFans'
            }
            let avatar_uri = ""
            function getOpenidList() {
                Ajax(`/admin/openDouyin/getOpenId`, {}, 'get').then(res => {
                    if (res.code === 200) {
                        console.log("res---", $("#selectOne"))
                        $.each(res.data, function (index, item) {
                            $('#open_id').append(new Option(item.short_id, item.open_id));
                        });
                        layui.form.render("select");

                    }
                });
            }
            getOpenidList()
            layui.use([
                'layer', 'element', 'form', 'upload'
            ], function () {
                var form = layui.form;
                var layer = layui.layer;
                var upload = layui.upload;
                var open_id = ''
                // 监听 第一级的select 事件
                form.on('select(open_id)',(data) =>{
                    open_id = data.value; // 获取选中的值
                    console.log("--------open_id",open_id);
                    localStorage.setItem("open_id",open_id)
                    var text = data.elem[data.elem.selectedIndex].text; // 获取选中的文本

                });
                // 执行实例
                var uploadInst = upload.render({
                    elem: '#img_upload', // 绑定元素
                    url: '/admin/openDouyin/postUploadImage', // 上传接口
                    data: {
                        open_id: localStorage.getItem('open_id')
                    },
                    field: 'image',
                    headers: {
                        "token": localStorage.getItem('adminToken')
                    },
                    number: 1,
                    auto: true,
                    bindAction: "#img_upload",
                    done: function (res) { // 上传完毕回调
                        $('.avatar_uri').attr('src', res.data.image_id);
                        avatar_uri = res.data.image_id
                    },
                    error: function (err) { // 请求异常回调
                        console.log("上传错误---")
                    }
                });
                form.on('select(fans_limit)', function (data) {
                    var elem = data.elem; // 获得 select 原始 DOM 对象
                    var value = data.value; // 获得被选中的值
                    var othis = data.othis;
                    // 获得 select 元素被替换后的 jQuery 对象

                    // layer.msg(this.innerHTML + ' 的 value: ' + value); // this 为当前选中 <option> 元素对象
                });
                // 提交事件
                // form.on('submit(submitData)', function (data) {
                //     var field = data.field;
                //     // 获取表单字段值
                //     // 显示填写结果，仅作演示用
                //     // 此处可执行 Ajax 等操作
                //     // …
                //     return false; // 阻止默认 form 跳转
                // });
                form.on('submit(submitData)', function (data) {
                    var formData = data.field;
                    formData.avatar_uri = avatar_uri;
                    formData.open_id=localStorage.getItem("open_id")
                    let url = params.addUrl;
                    layer.confirm('确认此操作吗？', function () {
                        if (confirm) {
                            Ajax(url, formData).then(data => {
                                if (data.code === 200) {
                                    layer.msg(data.message, {
                                        icon: 6,
                                        time: 1000
                                    }, function () { // 关闭当前frame
                                        x_admin_close();
                                        // 可以对父窗口进行刷新
                                        x_admin_father_reload();

                                    });
                                }
                            });
                        } else {
                            x_admin_close();
                            // 可以对父窗口进行刷新
                            x_admin_father_reload();
                        }

                    });

                    return false
                });
            });
        </script>
    </body>

</html>
